<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;padding-bottom: 80px;" v-show="showApp">
        <div style="height: 100%;overflow: auto;">
            <div class="top_box">
                <div class="title_box">
                    <div class="title_icon"></div>
                    <div class="title_txt">总施工计划</div>
                </div>
                <div class="top_cont">
                    <div class="cell_box">
                        <div class="cell_txt must_input">总计划标题</div>
                        <div class="cell_cont">
                            <el-tooltip class="item" effect="dark" :content="title" placement="top-end">
                                <el-input placeholder="" class="public_input" v-model="title" clearable disabled>
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="cell_box">
                        <div class="cell_txt must_input">工程开工完工日期</div>
                        <div class="cell_cont">
                            <div class="public_input">
                                <el-date-picker v-model="timeData" type="daterange" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开工日期"
                                    :picker-options="pickerOptions" end-placeholder="完工日期">
                                </el-date-picker>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lang_sliver"></div>
            <div class="content_box">
                <div class="title_box" style="padding: 16px 0 20px;">
                    <div class="title_icon"></div>
                    <div class="title_txt">主体阶段各楼层材料用量</div>
                </div>
                <div class="detail_box">
                    <!-- 主体阶段各楼层材料用量 -->
                    <div class="first_tabs">
                        <!-- 多楼层切换 -->
                        <el-tabs @tab-click="tabclick" v-model="firstTabsName" type="card">
                            <el-tab-pane :label="item.name" :name="'x' + index" v-for="(item, index) in firstTabsData"
                                :key="index"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="first_cont" v-if="'x' + index == firstTabsName" v-for="(item, index) in firstTabsData"
                        :key="index">
                        <div class="child_tabs">
                            <!-- 对每一项的processList进行tab切换 tab的值以z开头 这个由父亲的属性childTabsName这个值为当前tab的切换值-->
                            <el-tabs v-model="item.childTabsName" @tab-click="tabclick" type="card">
                                <el-tab-pane :name="'z' + index2" v-if="item2.id !=1 && item2.id != 2"
                                    :label="item2.name" v-for="(item2, index2) in item.processList" :key="index2">
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <div class="child_but">
                            <!-- 对 firstTabsData 的每一项的types进行切换 作为阶梯用量和单层理论用量的切换-->
                            <el-button v-if="item.types == 1" @click="switchTab(2, item)" type="primary"
                                style="width: 115px;">阶梯用量</el-button>
                            <el-button v-if="item.types == 2" @click="switchTab(1, item)" type="primary"
                                style="width: 130px;">单层理论用量</el-button>
                            <el-button type="primary" @click="syncData(index)" style="width: 135px;">
                                同步数据到其他主体
                            </el-button>

                        </div>
                        <!-- 搭建房子模型 并且对每一幢楼的 roofType 进行判断控制 -->
                        <div class="child_cont" v-if="item.childTabsName == 'z' + index2"
                            v-for="(item2, index2) in item.processList" :key="index2">
                            <div class="child_top" v-if="item.roofType == 2">
                                <div class="child_top_bg">
                                    <div class="child_top_column" style="left: 22%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 29%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 36%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 43%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 50%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 57%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 64%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 71%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 78%;transform: translateX(-50%);"></div>
                                    <div class="child_top_triangle"></div>
                                    <div class="child_top_triangle2"></div>
                                </div>
                                <div class="child_top_title" v-if="item.types == 1">
                                    <div class="child_top_title_name">单层理论用量</div>
                                    <div class="child_top_title_desc">每层数据为该楼层的理论用量</div>
                                    <div class="child_top_title_desc">即：顶层数据仅代表顶层单独的理论用量</div>
                                </div>
                                <div class="child_top_title" v-if="item.types == 2">
                                    <div class="child_top_title_name">阶梯用量</div>
                                    <div class="child_top_title_desc">每层数据为此主体施工至该楼层的总用量</div>
                                    <div class="child_top_title_desc">即：顶层数据为该主体的理论总用量</div>
                                </div>
                            </div>
                            <div class="child_top" v-if="item.roofType == 1">
                                <div class="child_top_bg2">
                                    <div class="child_top_column" style="left: 22%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 29%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 36%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 43%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 50%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 57%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 64%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 71%;transform: translateX(-50%);"></div>
                                    <div class="child_top_column" style="left: 78%;transform: translateX(-50%);"></div>
                                    <div class="child_top_bg2_top1"></div>
                                    <div class="child_top_bg2_top2"></div>
                                </div>
                                <div class="child_top_title" v-if="item.types == 1">
                                    <div class="child_top_title_name">单层理论用量</div>
                                    <div class="child_top_title_desc">每层数据为该楼层的理论用量</div>
                                    <div class="child_top_title_desc">即：顶层数据仅代表顶层单独的理论用量</div>
                                </div>
                                <div class="child_top_title" v-if="item.types == 2">
                                    <div class="child_top_title_name">阶梯用量</div>
                                    <div class="child_top_title_desc">每层数据为此主体施工至该楼层的总用量</div>
                                    <div class="child_top_title_desc">即：顶层数据为该主体的理论总用量</div>
                                </div>
                            </div>
                            <!-- 右侧材料详情  对processList内的每一项内的clList进行遍历-->
                            <div class="child_cnet">
                                <div class="child_cnet_box">
                                    <div class="child_cnet_tabs_box">
                                        <div class="child_cnet_tabs">
                                            <div style="overflow:hidden;height: 90px;">
                                                <div ref="titleScroll" class="titleScroll" style="overflow: auto;">
                                                    <div style="white-space:nowrap;display: inline-block;">
                                                        <div class="child_cnet_material child_cnet_material1"
                                                            v-for="(item3, index3) in item2.clList" :key="index3">
                                                            <div class="material_info">
                                                                <!-- 材料名称 对单位型号是否展示 进行判断  sId sName-->
                                                                <div class="material_title">
                                                                    {{item3.mName}} <span
                                                                        v-if="item3.sId && item3.sId > 0">({{item3.sName}})</span>
                                                                    <span class="material_title_close"
                                                                        @click="deleteZtCl1(item2,index3)">
                                                                        <img src="../img//delete.png" alt=""
                                                                            style="width: 100%; height: 100%;">
                                                                    </span>
                                                                </div>
                                                                <div class="material_unit">单位：({{item3.unit}})</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 材料用量的具体数值 fgIndex进行判断 -->
                                            <div style="overflow:hidden;width: calc(100% + 17px)">
                                                <div ref="contScroll" @scroll="handlScroll"
                                                    style="height: auto;max-height:720px;overflow:auto;width: calc(100%); padding-bottom: 30px;">
                                                    <div class="material_num_list" v-if="index3 < item2.fgIndex"
                                                        v-for="(item3, index3) in item2.allList" :key="index3"
                                                        style="white-space:nowrap;display: inline-block;margin-top: 20px;height: 32px;">
                                                        <!-- matList 材料用量 -->
                                                        <div class="material_num_itme material_num_itme1"
                                                            v-for="(item4, index4) in item3.matList" :key="index4">
                                                            <el-input placeholder="" type="number"
                                                                v-model="item4.dosage" class="public_input"
                                                                v-if="item.types == 1"
                                                                @change="totleAllworkProArr(item4)"
                                                                :disabled="item.types == 2">
                                                            </el-input>
                                                            <div v-if="item.types == 2" class="disabled_box">
                                                                {{
                                                                setLjnum(item2.allList, item3, index3, item4,
                                                                index4)
                                                                }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 预计完工时间  processList内的allList  endTime floorName-->
                                <div class="chil_cnet_left">
                                    <div class="chil_cnet_left_title">
                                        <div class="chil_cnet_left_date">预计完工日期</div>
                                        <div class="chil_cnet_left_floor">楼层</div>
                                    </div>
                                    <div class="chil_cnet_left_cont chilcnetleft" ref="chilcnetleft">
                                        <div style="margin-top: 20px;display: flex;align-items: center;"
                                            v-if="index3 < item2.fgIndex" v-for="(item3, index3) in item2.allList"
                                            :key="index3">
                                            <div class="chil_cnet_left_date">
                                                <div class="public_input">
                                                    <el-form ref="dataForm" :model="item3" label-width="0px"
                                                        :rules="dateRules">
                                                        <el-form-item label="" prop="endTime">
                                                            <el-date-picker v-model="item3.endTime" type="date" class=""
                                                                :disabled="item.types == 2" format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm" placeholder="选择日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                            </div>
                                            <div class="chil_cnet_left_floor">{{item3.floorName}}层</div>
                                        </div>
                                    </div>
                                    <div class="chil_cnet_but" v-if="item.types == 1">
                                        <el-button class="border_but" @click="addztCl1(item2)" type="primary">
                                            添加材料
                                        </el-button>
                                    </div>
                                </div>
                            </div>

                            <!-- 根据fgIndex来展示不同的楼层区别  当不小于fgIndex时-->
                            <div class="child_bot">
                                <div class="child_bot_box">
                                    <div class="child_cnet_tabs_box">
                                        <div class="child_cnet_tabs">
                                            <div style="overflow:hidden;width: calc(100% + 17px)">
                                                <div ref="contdownScroll" class="contdownScroll"
                                                    style="height: auto;overflow:hidden;width: calc(100%);">
                                                    <div class="material_num_list"
                                                        v-if="index3 > item2.fgIndex || index3 == item2.fgIndex"
                                                        v-for="(item3, index3) in item2.allList" :key="index3"
                                                        :key="index"
                                                        style="white-space:nowrap;display: inline-block;margin-top: 20px;height: 32px;">
                                                        <div class="material_num_itme material_num_itme3"
                                                            v-for="(item4, index4) in item3.matList" :key="index4">
                                                            <el-input placeholder="" type="number"
                                                                v-model="item4.dosage" class="public_input"
                                                                v-if="item.types == 1"
                                                                @change="totleAllworkProArr(item4)"
                                                                :disabled="item.types == 2">
                                                            </el-input>
                                                            <!-- process遍历的每一个的list item3 当前遍历的list的每一项 对应索引 每一项的matList的遍历 项目 和 索引 -->
                                                            <div v-if="item.types == 2" class="disabled_box">
                                                                {{
                                                                setLjnum(item2.allList, item3, index3, item4,
                                                                index4)
                                                                }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 地下层 allList的数组是按照从顶层到地下层的顺序来排位的-->
                                <div class="chil_cnet_left">
                                    <div class="chil_cnet_left_cont" style="height: auto;">
                                        <div style="margin-top: 20px;display: flex;align-items: center;"
                                            v-if="index3 > item2.fgIndex || index3 == item2.fgIndex"
                                            v-for="(item3, index3) in item2.allList" :key="index3">
                                            <div class="chil_cnet_left_date">
                                                <div class="public_input">
                                                    <el-form ref="dataForm" :model="item3" label-width="0px"
                                                        :rules="dateRules">
                                                        <el-form-item label="" prop="endTime">
                                                            <el-date-picker v-model="item3.endTime" type="date" class=""
                                                                :disabled="item.types == 2" format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm" placeholder="选择日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                            </div>
                                            <div class="chil_cnet_left_floor">{{item3.floorName}}层</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 针对weight === 1 进行处理 基础和垫层  djclList-->
                            <div class="child_footer" v-if="item2.weight == 1">
                                <div class="child_footer_box">
                                    <div class="child_cnet_tabs_box">
                                        <div class="child_cnet_tabs">
                                            <div style="overflow:hidden;height: 90px;">
                                                <!-- 基础和垫层的djclList 材料用量 显示的材料名称-->
                                                <div ref="titleScroll2" class="titleScroll2" style="overflow: auto;">
                                                    <div style="white-space:nowrap;display: inline-block;">
                                                        <div class="child_cnet_material child_cnet_material2"
                                                            v-for="(item3, index3) in item2.djclList" :key="index3">
                                                            <div class="material_info">
                                                                <div class="material_title">
                                                                    {{item3.mName}} <span
                                                                        v-if="item3.sId && item3.sId > 0">({{item3.sName}})</span>
                                                                    <span class="material_title_close"
                                                                        @click="deleteZtCl2(item2,index3)">
                                                                        <img src="../img//delete.png" alt=""
                                                                            style="width: 100%; height: 100%;">
                                                                    </span>
                                                                </div>
                                                                <div class="material_unit">单位：({{item3.unit}})</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 基础和垫层的djclList 材料用量-->
                                            <div style="overflow:hidden;width: calc(100% + 17px)">
                                                <div ref="contScroll2" @scroll="handlScroll2"
                                                    style="height: auto;max-height:720px;overflow:auto;width: calc(100%);">
                                                    <div class="material_num_list"
                                                        v-for="(item3, index3) in item2.djAllList" :key="index3"
                                                        style="white-space:nowrap;display: inline-block;margin-top: 20px;height: 32px;">
                                                        <div class="material_num_itme material_num_itme2"
                                                            v-for="(item4, index4) in item3.matList" :key="index4">
                                                            <el-input placeholder="" type="number"
                                                                v-model="item4.dosage" class="public_input"
                                                                v-if="item.types == 1"
                                                                @change="totleAllworkProArr(item4)"
                                                                :disabled="item.types == 2">
                                                            </el-input>
                                                            <div v-if="item.types == 2" class="disabled_box">
                                                                {{
                                                                setLjnum(item2.djAllList, item3, index3, item4,
                                                                index4)
                                                                }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 基础和垫层的预计完成时间 -->
                                <div class="chil_cnet_left">
                                    <div class="chil_cnet_left_title">
                                        <div class="chil_cnet_left_date">预计完工日期</div>
                                        <div class="chil_cnet_left_floor"></div>
                                    </div>
                                    <div class="chil_cnet_left_cont" style="height: auto;">
                                        <div style="margin-top: 20px;display: flex;align-items: center;"
                                            v-for="(item3, index3) in item2.djAllList" :key="index3">
                                            <div class="chil_cnet_left_date">
                                                <div class="public_input">
                                                    <el-form ref="dataForm" :model="item3" label-width="0px"
                                                        :rules="dateRules">
                                                        <el-form-item label="" prop="endTime">
                                                            <el-date-picker v-model="item3.endTime" type="date" class=""
                                                                :disabled="item.types == 2" format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm" placeholder="选择日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                            </div>
                                            <div class="chil_cnet_left_floor">{{item3.floorName}}</div>
                                        </div>
                                    </div>
                                    <div class="chil_cnet_but" v-if="item.types == 1">
                                        <el-button class="border_but" @click="addztCl2(item2)" type="primary">
                                            添加材料
                                        </el-button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="all_work_box">
                    <div class="all_work_box_let" style="width: 40%;">
                        <div class="title_box" style="padding: 16px 0 20px;">
                            <div class="title_icon"></div>
                            <div class="title_txt">全部工序材料用量合计</div>
                        </div>
                        <div class="table_box border_table_box">
                            <el-table :data="clmxList" border max-height="400px" style="width: 100%">
                                <el-table-column prop="mName" align="center" min-width="100" show-overflow-tooltip
                                    label="材料"></el-table-column>
                                <el-table-column prop="sName" align="center" show-overflow-tooltip label="规格"
                                    min-width="70">
                                </el-table-column>

                                <el-table-column align="center" prop="dosage" show-overflow-tooltip label="数量"
                                    width="160">
                                </el-table-column>

                                <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位"
                                    min-width="70">
                                </el-table-column>

                                <el-table-column prop="approachTime" align="center" show-overflow-tooltip label="预警阈值"
                                    width="106">
                                    <template slot-scope="scope">
                                        <div class="table_input"
                                            style="display: flex;align-items: center;justify-content: center;">
                                            <el-input style="max-width: 66px;" placeholder="请输入内容" :min="0"
                                                type="number" v-model="scope.row.warning" clearable></el-input>
                                            <div>%</div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 上传附件 -->
                    <div class="all_work_box_right" style="flex: 1;margin-left: 20px;">
                        <div class="title_box" style="padding: 10px 0 20px;height: 55px;">
                            <div class="title_icon"></div>
                            <div class="title_txt">附件</div>
                            <div style="margin-left: 20px;" class="cell_but">
                                <el-upload class="upload-demo" action="##" :show-file-list="false"
                                    :http-request="httprequest" multiple>
                                    <el-button type="primary">上传附件</el-button>
                                </el-upload>
                            </div>
                        </div>
                        <div class="table_box border_table_box">
                            <el-table :data="fileList" max-height="400px" border style="width: 100%">

                                <el-table-column prop="filename" align="center" min-width="120" show-overflow-tooltip
                                    label="名称"></el-table-column>

                                <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人"
                                    width="120">
                                </el-table-column>

                                <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间"
                                    width="200">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="prevewImg(scope.row.fileurl)" type="text">查看</el-button>
                                        <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">
                                            下载
                                        </el-button>
                                        <el-button @click="removeImg(fileList, scope.$index)" type="text">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="请选择要同步的主体" custom-class="public_popup" :visible.sync="dialogVisible" width="30%">
            <div class="public_popup_box">
                <div class="popup_content">
                    <div v-for="(item, index) in gxDataList" :key="index" style="margin-top: 10px;">
                        <el-radio v-model="gxValue" :disabled="item.isclick" :label="item.id">{{item.name}}</el-radio>
                    </div>
                </div>
                <div class="but_box" style="padding:  0 20px;padding-bottom: 20px;">
                    <el-button @click="dialogVisible = false" class="cancelClass">取消</el-button>
                    <el-button type="primary" @click="confirmGxData" style="margin-left: 120px">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 提交总计划标题 -->
        <div class="but_box">
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
        <div style="height: 0;width: 0;overflow: hidden;"><input id="publicValue" type="text"></div>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                var validateDate = (rule, value, callback) => {
                    // if (value === '') {
                    //     callback(new Error('请输入密码'));
                    // } else {
                    //     if (this.ruleForm.checkPass !== '') {
                    //         this.$refs.ruleForm.validateField('checkPass');
                    //     }
                    //     callback();
                    // }
                    callback();
                };
                return {
                    gxDataList: [],
                    gxValue: '',
                    radio: '',
                    gxindex: 0,
                    dialogVisible: false,
                    tableData: [],
                    showApp: false,
                    timeData: [],
                    value: [],
                    title: '',
                    input: '',
                    firstTabsName: 'x0',
                    firstTabsData: [],
                    childTabsName: 'z0',
                    childTabsData: [],
                    upstairsData: [],
                    floorData: [],
                    value1: '',
                    floordownData: [],
                    upstairsFooterData: [],
                    fileList: [],
                    previewList: [],
                    clmxList: [],
                    planId: '',
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },

                    // 预计完工日期 校验规则
                    dateRules: {
                        endTime: [
                            // { required: true, message: '预计完工时间不能为空', trigger: 'blur' },
                            { validator: validateDate, trigger: 'blur' }
                        ]
                    }
                };
            },
            // 垫层的数据把基础的数据覆盖了 gxValue为选择同步的主体对象
            methods: {
                confirmGxData() {
                    var that = this
                    if (!this.gxValue) {
                        this.$message({
                            message: '请选择主体',
                            type: 'warning',
                            duration: 1500
                        });
                        return false
                    }
                    var title = '是否同步到其他主体'
                    for (var i = 0; i < that.firstTabsData.length; i++) {
                        if (that.firstTabsData[i].id == that.gxValue) {

                            if (that.firstTabsData[i].processList[0].allList.length > 0) {
                                title = '该主体已有数据，是否覆盖'
                            }
                        }
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // var list = JSON.parse(JSON.stringify(that.firstTabsData));
                        // // gxValue 是 同步覆盖的对象  gxindex 是当前点击同步操作的时候索引
                        // console.log(list[that.gxindex])
                        // var targetArr = JSON.parse(JSON.stringify(list[that.gxindex]));
                        // list[selectTargetIndex].childObj = targetArr.childObj;
                        // list[selectTargetIndex].childObj = targetArr.childObj;

                        // list[selectTargetIndex].childObj = targetArr.childObj;


                        // console.log(list[selectTargetIndex])
                        // that.firstTabsData = JSON.parse(JSON.stringify(list));
                        for (var i = 0; i < that.firstTabsData.length; i++) {
                            if (that.firstTabsData[i].id == that.gxValue) {

                                // 遍历firstTabsData 如果当前项的id等于选中的需要覆盖的主体
                                for (var j = 0; j < that.firstTabsData[i].processList.length; j++) {
                                    // 如果当前操作的是垫层或者基础
                                    if (that.firstTabsData[i].processList[j].weight == 1) {
                                        // gxindex 被同步的对象
                                        for (var k = 0; k < that.firstTabsData[that.gxindex].processList.length; k++) {
                                            // 被同步的对象的 垫层或者基础
                                            if (that.firstTabsData[that.gxindex].processList[k].weight == 1) {
                                                // 垫层或基础赋值
                                                that.firstTabsData[i].processList[j].djclList = JSON.parse(JSON.stringify(that.firstTabsData[that.gxindex].processList[k].djclList))
                                                for (var n = 0; n < that.firstTabsData[i].processList[j].djAllList.length; n++) {
                                                    for (var m = 0; m < that.firstTabsData[that.gxindex].processList[k].djAllList.length; m++) {

                                                        if (n === m) {
                                                            that.firstTabsData[i].processList[j].djAllList[n].matList = []
                                                            that.firstTabsData[i].processList[j].djAllList[n].endTime = that.firstTabsData[that.gxindex].processList[k].djAllList[m].endTime
                                                            for (var l = 0; l < that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList.length; l++) {
                                                                that.firstTabsData[i].processList[j].djAllList[n].matList.push({
                                                                    dosage: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].dosage,
                                                                    ljdosage: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].ljdosage,
                                                                    mId: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].mId,
                                                                    mName: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].mName,
                                                                    sId: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].sId,
                                                                    sName: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].sName,
                                                                    unit: that.firstTabsData[that.gxindex].processList[k].djAllList[m].matList[l].unit,
                                                                })
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    for (var k = 0; k < that.firstTabsData[that.gxindex].processList.length; k++) {
                                        if (that.firstTabsData[i].processList[j].id == that.firstTabsData[that.gxindex].processList[k].id) {
                                            that.firstTabsData[i].processList[j].clList = JSON.parse(JSON.stringify(that.firstTabsData[that.gxindex].processList[k].clList))
                                            for (var n = 0; n < that.firstTabsData[i].processList[j].allList.length; n++) {
                                                for (var m = 0; m < that.firstTabsData[that.gxindex].processList[k].allList.length; m++) {
                                                    if (that.firstTabsData[i].processList[j].allList[n].floorName == that.firstTabsData[that.gxindex].processList[k].allList[m].floorName) {
                                                        that.firstTabsData[i].processList[j].allList[n].matList = []
                                                        that.firstTabsData[i].processList[j].allList[n].endTime = that.firstTabsData[that.gxindex].processList[k].allList[m].endTime
                                                        for (var l = 0; l < that.firstTabsData[that.gxindex].processList[k].allList[m].matList.length; l++) {
                                                            that.firstTabsData[i].processList[j].allList[n].matList.push({
                                                                dosage: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].dosage,
                                                                ljdosage: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].ljdosage,
                                                                mId: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].mId,
                                                                mName: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].mName,
                                                                sId: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].sId,
                                                                sName: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].sName,
                                                                unit: that.firstTabsData[that.gxindex].processList[k].allList[m].matList[l].unit,
                                                            })
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        that.dialogVisible = false
                        that.totleAllworkProArr()
                    }).catch(() => {

                    });
                    // console.log(this.gxValue, this.gxindex)
                },
                tabclick() {
                    setTimeout(function () {
                        for (var j = 0; j < $('.material_num_itme1').length; j++) {
                            $('.material_num_itme1').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                        }
                        for (var j = 0; j < $('.material_num_itme3').length; j++) {
                            $('.material_num_itme3').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                        }
                        for (var j = 0; j < $('.material_num_itme2').length; j++) {
                            $('.material_num_itme2').eq(j).css('width', $('.child_cnet_material2').eq(j % $('.child_cnet_material2').length).css('width'))
                        }
                    }, 100)
                },
                // 同步数据到其他主体 出现选择框
                syncData(index) {
                    this.dialogVisible = true
                    this.gxindex = index
                    this.gxDataList = JSON.parse(JSON.stringify(this.firstTabsData))
                    this.gxDataList[index].isclick = true
                    this.gxValue = ''
                    for (var i = 0; i < this.gxDataList.length; i++) {
                        if (this.gxDataList[index].countFloorNum < this.gxDataList[i].countFloorNum) {
                            this.gxDataList[i].isclick = true
                        }
                    }
                },
                // 日期限制
                handle() {
                    // 1.大于等于该楼层下方全部楼层的任何一个预计完工日期。2.小于等于该楼层上方全部楼层的任何一个预计完工日期

                },
                confirms() {
                    var that = this
                    // if (!this.title) {
                    //     this.$message({
                    //         message: '请输入标题',
                    //         type: 'warning',
                    //         duration: 1500
                    //     });
                    //     return false
                    // }
                    if (this.timeData.length == 0) {
                        this.$message({
                            message: '请选择开工完工日期',
                            type: 'warning',
                            duration: 1500
                        });
                        return false
                    }
                    // 处理提交的主体列表
                    var mainList = []
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        mainList.push({
                            id: this.firstTabsData[i].id,
                            name: this.firstTabsData[i].name,
                            processList: []
                        })
                    }
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                            mainList[i].processList.push({
                                id: this.firstTabsData[i].processList[j].id,
                                name: this.firstTabsData[i].processList[j].name,
                                sort: this.firstTabsData[i].processList[j].sort,
                                weight: this.firstTabsData[i].processList[j].weight,
                                floorList: []
                            })
                        }
                    }
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                            for (var k = 0; k < this.firstTabsData[i].processList[j].allList.length; k++) {
                                mainList[i].processList[j].floorList.push(this.firstTabsData[i].processList[j].allList[k])
                            }
                        }
                    }
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                            if (this.firstTabsData[i].processList[j].weight == 1) {
                                mainList[i].processList.push({
                                    id: this.firstTabsData[i].childObj.id,
                                    name: this.firstTabsData[i].childObj.name,
                                    sort: this.firstTabsData[i].childObj.sort,
                                    weight: this.firstTabsData[i].childObj.weight,
                                    floorList: [this.firstTabsData[i].processList[j].djAllList[0]]
                                })
                                mainList[i].processList.push({
                                    id: this.firstTabsData[i].firstObj.id,
                                    name: this.firstTabsData[i].firstObj.name,
                                    sort: this.firstTabsData[i].firstObj.sort,
                                    weight: this.firstTabsData[i].firstObj.weight,
                                    floorList: [this.firstTabsData[i].processList[j].djAllList[1]]
                                })
                            }

                        }
                    }

                    // 对mainList进行校验
                    for (var i = 0; i < mainList.length; i++) {
                        // 当前项的主体
                        var mainItem = mainList[i];
                        for (var j = 0; j < mainItem.processList.length; j++) {
                            var projectItem = mainItem.processList[j];
                            // 对工序下 进行校验
                            for (var k = 0; k < projectItem.floorList.length; k++) {
                                var floorItem = projectItem.floorList[k];
                                // 错误信息提示主语
                                var messageMain = mainItem.name + '号楼的' + projectItem.name + "下的" + floorItem.floorName;
                                // 对工序下的楼层 进行校验
                                // 对预计完工时间进行校验
                                if (!floorItem.endTime) {
                                    this.$message({
                                        message: messageMain + '请选择预期完工时间',
                                        type: "warning",
                                        duration: 1500
                                    });
                                    return
                                } else {
                                    var allEndTime = this.timeData[1];
                                    var allStartTime = this.timeData[0];
                                    if ((new Date(floorItem.endTime)).getTime() > (new Date(allEndTime)).getTime()) {
                                        this.$message({
                                            message: messageMain + '的预期完工时间不应大于工程完工时间',
                                            type: "warning",
                                            duration: 1500
                                        });
                                        return
                                    }
                                    if ((new Date(floorItem.endTime)).getTime() < (new Date(allStartTime)).getTime()) {
                                        this.$message({
                                            message: messageMain + '的预期完工时间不应小于工程开工时间',
                                            type: "warning",
                                            duration: 1500
                                        });
                                        return
                                    }
                                    // 进行前一个楼层和后一个楼层的比较
                                    var downFloor = projectItem.floorList[k + 1];
                                    var upFloor = projectItem.floorList[k - 1];
                                    if (!!downFloor) {
                                        if ((new Date(floorItem.endTime)).getTime() < (new Date(downFloor.endTime)).getTime()) {
                                            this.$message({
                                                message: messageMain + '预计完工时间应该不小于其下面楼层的预计完工时间',
                                                type: "warning",
                                                duration: 1500
                                            });
                                            return
                                        }
                                    } else {
                                        // 有可能是主体支架的第一楼 需要比较基础
                                        if (parseInt(projectItem.weight) === 1) {
                                            var list = mainItem.processList.filter(function (item, index) {
                                                return item.name === "基础" && parseInt(item.id) === 2
                                            });
                                            if (list.length > 0) {
                                                var compareTime = list[0].floorList.endTime;
                                                if (!!compareTime) {
                                                    if ((new Date(floorItem.endTime)).getTime() < (new Date(compareTime)).getTime()) {
                                                        this.$message({
                                                            message: messageMain + '预计完工时间应该不小于其下面楼层的预计完工时间',
                                                            type: "warning",
                                                            duration: 1500
                                                        });
                                                        return
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    if (!!upFloor) {
                                        if ((new Date(floorItem.endTime)).getTime() > (new Date(upFloor.endTime)).getTime()) {
                                            this.$message({
                                                message: messageMain + '预计完工时间应该不大于于其下面楼层的预计完工时间',
                                                type: "warning",
                                                duration: 1500
                                            });
                                            return
                                        }
                                    }

                                }
                                if (floorItem.matList.length === 0) {
                                    this.$message({
                                        message: messageMain + '请添加材料',
                                        type: "warning",
                                        duration: 1500
                                    });
                                    return
                                }
                                // 对当前楼层下的材料的值进行非空校验
                                for (var h = 0; h < floorItem.matList.length; h++) {
                                    var matItem = floorItem.matList[h];
                                    if (!matItem.dosage) {
                                        this.$message({
                                            message: messageMain + matItem.mName + "请输入单层理论用量",
                                            type: "warning",
                                            duration: 1500
                                        });
                                        return
                                    } else {
                                        // if (parseInt(matItem.dosage) === 0) {
                                        //     this.$message({
                                        //         message: messageMain + matItem.mName + "的单层理论用量不能为0",
                                        //         type: "warning",
                                        //         duration: 1500
                                        //     });
                                        //     return
                                        // }
                                        if (parseFloat(matItem.dosage) < 0) {
                                            this.$message({
                                                message: messageMain + matItem.mName + "的单层理论用量不能小于0",
                                                type: "warning",
                                                duration: 1500
                                            });
                                            return
                                        }
                                    }
                                }
                            }
                        }
                    }
                    // for (var i = 0; i < mainList.length; i++) {
                    //     for (var j = 0; j < mainList[i].processList.length; j++) {
                    //         for (var k = 0; k < mainList[i].processList[j].floorList.length; k++) {
                    //             if (mainList[i].processList[j].floorList[k].matList.length == 0) {
                    //                 this.$message({
                    //                     message: mainList[i].name + '号楼的' + mainList[i].processList[j].name + '请添加材料',
                    //                     type: 'warning',
                    //                     duration: 1500
                    //                 });
                    //                 return false
                    //             }
                    //         }
                    //     }
                    // }

                    var fileArr = []
                    var fileList = this.fileList
                    for (var i = 0; i < fileList.length; i++) {
                        fileArr.push(fileList[i].fileid + ',' + fileList[i].filename + ',' + fileList[i].userName + ',' + fileList[i].uploadTime)
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/EditMasterPlan',
                        data: JSON.stringify({
                            model: {
                                mainList: mainList,
                                planMatCountList: this.clmxList,
                                uploadFile: fileArr.join('|'),
                                endTime: this.timeData[1],
                                startTime: this.timeData[0],
                                title: this.title,
                                id: this.planId
                            }
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: res.msg ? res.msg : '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                that.getDetail()
                            }, 100)
                        }
                    });
                },
                // process遍历的每一个的list item3 当前遍历的list的每一项 对应索引 每一项的matList的遍历 项目 和 索引
                setLjnum(list, item3, index3, item4, index4) {
                    if (index3 == list.length - 1) {
                        item4.ljdosage = item4.dosage
                        return item4.dosage
                    }
                    // 对NaN 进行处理 处理为0
                    var ljnum = 0
                    ljnum = parseFloat(list[index3 + 1].matList[index4].ljdosage || 0) + parseFloat(list[index3].matList[index4].dosage || 0)
                    list[index3].matList[index4].ljdosage = ljnum
                    return ljnum
                },
                switchTab(id, item) {
                    item.types = id
                    this.$forceUpdate()
                },

                // 垫层基础 删除
                deleteZtCl2(item, index) {
                    var that = this;
                    this.$confirm("是否确认删除此类材料", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        console.log(that.clmxList, item)
                        var list = JSON.parse(JSON.stringify(item.djclList));
                        list.splice(index, 1);
                        item.djclList = list;
                        for (var i = 0; i < item.djAllList.length; i++) {
                            for (var j = 0; j < that.clmxList.length; j++) {
                                if ((that.clmxList[j].mId + that.clmxList[j].sId) == (item.djAllList[i].matList[index].mId + item.djAllList[i].matList[index].sId)) {
                                    that.clmxList[j].dosage = parseInt(that.clmxList[j].dosage) - parseInt(item.djAllList[i].matList[index].dosage);
                                    if (that.clmxList[j].dosage == 0) {
                                        that.clmxList.splice(j, 1)
                                    }
                                }
                            }
                            item.djAllList[i].matList.splice(index, 1);
                        }
                    }).catch(function () {
                    });
                },
                addztCl2(item) {
                    var that = this
                    var selectArr = []
                    for (var i = 0; i < item.djclList.length; i++) {
                        selectArr.push({
                            materialId: item.djclList[i].mId,
                            specificationId: item.djclList[i].sId
                        })
                    }
                    $('#publicValue').val('')
                    layer.open({
                        type: 2,
                        title: '选择材料和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                        content: '/ApsPublic/publicList/clmxList.html?projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if ($('#publicValue').val()) {
                                    var newList = JSON.parse($('#publicValue').val())
                                    for (var i = 0; i < newList.length; i++) {
                                        item.djclList.push({
                                            mId: newList[i].materialId,
                                            sId: newList[i].specificationId,
                                            mName: newList[i].materialName,
                                            sName: newList[i].specificationName,
                                            unit: newList[i].unit,
                                            dosage: 0
                                        })
                                    }
                                    var arrData = []
                                    for (var j = 0; j < newList.length; j++) {
                                        arrData.push({
                                            mId: newList[j].materialId,
                                            sId: newList[j].specificationId,
                                            mName: newList[j].materialName,
                                            sName: newList[j].specificationName,
                                            unit: newList[j].unit,
                                            dosage: 0,
                                            ljdosage: 0
                                        })
                                    }

                                    for (var i = 0; i < item.djAllList.length; i++) {
                                        item.djAllList[i].matList = JSON.parse(JSON.stringify(item.djAllList[i].matList.concat(JSON.parse(JSON.stringify(arrData)))))
                                    }
                                    that.setAllworkProArr()
                                    setTimeout(function () {
                                        for (var j = 0; j < $('.material_num_itme1').length; j++) {
                                            $('.material_num_itme1').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                        }
                                        for (var j = 0; j < $('.material_num_itme3').length; j++) {
                                            $('.material_num_itme3').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                        }
                                        for (var j = 0; j < $('.material_num_itme2').length; j++) {
                                            $('.material_num_itme2').eq(j).css('width', $('.child_cnet_material2').eq(j % $('.child_cnet_material2').length).css('width'))
                                        }
                                    }, 100)
                                }
                            }, 10)
                        }
                    });
                },

                deleteZtCl1(item, index) {
                    var that = this;
                    this.$confirm("是否确认删除此类材料", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        var list = JSON.parse(JSON.stringify(item.clList));
                        list.splice(index, 1);
                        item.clList = list;
                        for (var i = 0; i < item.allList.length; i++) {
                            for (var j = 0; j < that.clmxList.length; j++) {
                                if ((that.clmxList[j].mId + that.clmxList[j].sId) == (item.allList[i].matList[index].mId + item.allList[i].matList[index].sId)) {
                                    that.clmxList[j].dosage = parseInt(that.clmxList[j].dosage) - parseInt(item.allList[i].matList[index].dosage);
                                    if (that.clmxList[j].dosage == 0) {
                                        that.clmxList.splice(j, 1)
                                    }
                                }
                            }
                            item.allList[i].matList.splice(index, 1);
                        }
                    }).catch(function () {
                    });
                },

                addztCl1(item) {

                    var that = this
                    var selectArr = []
                    for (var i = 0; i < item.clList.length; i++) {
                        selectArr.push({
                            materialId: item.clList[i].mId,
                            specificationId: item.clList[i].sId
                        })
                    }
                    $('#publicValue').val('')
                    layer.open({
                        type: 2,
                        title: '选择材料和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                        content: '/ApsPublic/publicList/clmxList.html?projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if ($('#publicValue').val()) {
                                    var newList = JSON.parse($('#publicValue').val())
                                    for (var i = 0; i < newList.length; i++) {
                                        item.clList.push({
                                            mId: newList[i].materialId,
                                            sId: newList[i].specificationId,
                                            mName: newList[i].materialName,
                                            sName: newList[i].specificationName,
                                            unit: newList[i].unit,
                                            dosage: 0
                                        })
                                    }
                                    var arrData = []
                                    for (var j = 0; j < newList.length; j++) {
                                        arrData.push({
                                            mId: newList[j].materialId,
                                            sId: newList[j].specificationId,
                                            mName: newList[j].materialName,
                                            sName: newList[j].specificationName,
                                            unit: newList[j].unit,
                                            dosage: 0,
                                            ljdosage: 0
                                        })
                                    }
                                    for (var i = 0; i < item.allList.length; i++) {
                                        item.allList[i].matList = JSON.parse(JSON.stringify(item.allList[i].matList.concat(JSON.parse(JSON.stringify(arrData)))))
                                    }
                                    that.setAllworkProArr()
                                    setTimeout(function () {
                                        for (var j = 0; j < $('.material_num_itme1').length; j++) {
                                            $('.material_num_itme1').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                        }
                                        for (var j = 0; j < $('.material_num_itme3').length; j++) {
                                            $('.material_num_itme3').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                        }
                                        for (var j = 0; j < $('.material_num_itme2').length; j++) {
                                            $('.material_num_itme2').eq(j).css('width', $('.child_cnet_material2').eq(j % $('.child_cnet_material2').length).css('width'))
                                        }
                                    }, 100)
                                }
                            }, 10)
                        }
                    });

                },
                totleAllworkProArr(item) {
                    var clmxList = this.clmxList
                    // for (var m = 0; m < clmxList.length; m++) {
                    //     if (clmxList[m].mId == item.mId && clmxList[m].sId == item.sId) {
                    //         clmxList[m].dosage =  parseFloat(clmxList[m].dosage) + parseFloat(item.dosage)
                    //     }
                    // }
                    for (var m = 0; m < clmxList.length; m++) {
                        clmxList[m].dosage = 0
                        for (var i = 0; i < this.firstTabsData.length; i++) {
                            for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                                if (this.firstTabsData[i].processList[j].allList.length > 0) {
                                    for (var k = 0; k < this.firstTabsData[i].processList[j].allList.length; k++) {
                                        if (this.firstTabsData[i].processList[j].allList[k].matList.length > 0) {
                                            for (var n = 0; n < this.firstTabsData[i].processList[j].allList[k].matList.length; n++) {
                                                if (clmxList[m].mId == this.firstTabsData[i].processList[j].allList[k].matList[n].mId && clmxList[m].sId == this.firstTabsData[i].processList[j].allList[k].matList[n].sId) {
                                                    clmxList[m].dosage = parseFloat(clmxList[m].dosage) + parseFloat(this.firstTabsData[i].processList[j].allList[k].matList[n].dosage)
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    for (var m = 0; m < clmxList.length; m++) {
                        for (var i = 0; i < this.firstTabsData.length; i++) {
                            for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                                if (this.firstTabsData[i].processList[j].djAllList && this.firstTabsData[i].processList[j].djAllList.length > 0) {
                                    for (var k = 0; k < this.firstTabsData[i].processList[j].djAllList.length; k++) {
                                        if (this.firstTabsData[i].processList[j].djAllList[k].matList.length > 0) {
                                            for (var n = 0; n < this.firstTabsData[i].processList[j].djAllList[k].matList.length; n++) {
                                                if (clmxList[m].mId == this.firstTabsData[i].processList[j].djAllList[k].matList[n].mId && clmxList[m].sId == this.firstTabsData[i].processList[j].djAllList[k].matList[n].sId) {
                                                    clmxList[m].dosage = parseFloat(clmxList[m].dosage) + parseFloat(this.firstTabsData[i].processList[j].djAllList[k].matList[n].dosage)
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    this.clmxList = clmxList
                    this.$forceUpdate()
                },
                setAllworkProArr() {
                    var clmxList = this.clmxList
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                            if (this.firstTabsData[i].processList[j].allList.length > 0) {
                                for (var k = 0; k < this.firstTabsData[i].processList[j].allList.length; k++) {
                                    if (this.firstTabsData[i].processList[j].allList[k].matList.length > 0) {
                                        for (var n = 0; n < this.firstTabsData[i].processList[j].allList[k].matList.length; n++) {
                                            var flag = true
                                            for (var m = 0; m < clmxList.length; m++) {
                                                if (clmxList[m].mId == this.firstTabsData[i].processList[j].allList[k].matList[n].mId && clmxList[m].sId == this.firstTabsData[i].processList[j].allList[k].matList[n].sId) {
                                                    flag = false
                                                }
                                            }
                                            if (flag) {
                                                clmxList.push({
                                                    mId: this.firstTabsData[i].processList[j].allList[k].matList[n].mId,
                                                    mName: this.firstTabsData[i].processList[j].allList[k].matList[n].mName,
                                                    sId: this.firstTabsData[i].processList[j].allList[k].matList[n].sId,
                                                    sName: this.firstTabsData[i].processList[j].allList[k].matList[n].sName,
                                                    unit: this.firstTabsData[i].processList[j].allList[k].matList[n].unit,
                                                    dosage: this.firstTabsData[i].processList[j].allList[k].matList[n].dosage,
                                                    warning: 10,
                                                    id: '',
                                                    planId: this.planId
                                                })
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    for (var i = 0; i < this.firstTabsData.length; i++) {
                        for (var j = 0; j < this.firstTabsData[i].processList.length; j++) {
                            if (this.firstTabsData[i].processList[j].djAllList && this.firstTabsData[i].processList[j].djAllList.length > 0) {
                                for (var k = 0; k < this.firstTabsData[i].processList[j].djAllList.length; k++) {
                                    if (this.firstTabsData[i].processList[j].djAllList[k].matList.length > 0) {
                                        for (var n = 0; n < this.firstTabsData[i].processList[j].djAllList[k].matList.length; n++) {
                                            var flag = true
                                            for (var m = 0; m < clmxList.length; m++) {
                                                if (clmxList[m].mId == this.firstTabsData[i].processList[j].djAllList[k].matList[n].mId && clmxList[m].sId == this.firstTabsData[i].processList[j].djAllList[k].matList[n].sId) {
                                                    flag = false
                                                }
                                            }
                                            if (flag) {
                                                clmxList.push({
                                                    mId: this.firstTabsData[i].processList[j].djAllList[k].matList[n].mId,
                                                    mName: this.firstTabsData[i].processList[j].djAllList[k].matList[n].mName,
                                                    sId: this.firstTabsData[i].processList[j].djAllList[k].matList[n].sId,
                                                    sName: this.firstTabsData[i].processList[j].djAllList[k].matList[n].sName,
                                                    unit: this.firstTabsData[i].processList[j].djAllList[k].matList[n].unit,
                                                    dosage: this.firstTabsData[i].processList[j].djAllList[k].matList[n].dosage,
                                                    warning: 10,
                                                    id: '',
                                                    planId: this.planId
                                                })
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    this.clmxList = clmxList
                    this.$forceUpdate()
                },
                // 文件上传
                httprequest(file) {
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            that.fileList.push({
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            })
                        }
                    });
                },
                prevewImg(urls) {
                    this.previewList = [urls];
                    setTimeout(function () {
                        var viewer = new Viewer(document.getElementById('jq22'), {
                            hide: function () {
                                viewer.destroy();
                            }
                        });
                        viewer.show();
                    }, 10);
                },
                downImg(filename, urls) {
                    publicdownFile(filename, urls)
                },
                removeImg(arr, index, types) {
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                    }).catch(function () {
                    });
                },
                handlScroll2(e) {
                    $('.titleScroll2').scrollLeft(e.target.scrollLeft)
                    // this.$refs.titleScroll2.scrollLeft = this.$refs.contScroll2.scrollLeft
                },
                handlScroll(e) {
                    $('.titleScroll').scrollLeft(e.target.scrollLeft)
                    $('.chilcnetleft').scrollTop(e.target.scrollTop)
                    $('.contdownScroll').scrollLeft(e.target.scrollLeft)
                },
                getDetail() {
                    var that = this
                    xLoading(true, '正在加载')
                    $.ajax({
                        type: 'post',
                        // headers: {
                        //     'Content-Type': 'application/json'
                        // },
                        url: baseUrl + '/ConstructionPlan/GetMasterPlan',
                        // data: {
                        //     projectId: "G000123"
                        // },
                        data: {},
                        dataType: 'json',
                        success: function (res) {

                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.title = res.data.title
                            that.planId = res.data.id
                            if (res.data.startTime && res.data.endTime) {
                                that.timeData = [res.data.startTime, res.data.endTime]
                            }
                            if (res.data.uploadFile.length > 0) {
                                for (var i = 0; i < res.data.uploadFile.split('|').length; i++) {
                                    that.fileList.push({
                                        fileid: res.data.uploadFile.split('|')[i].split(',')[0],
                                        filename: res.data.uploadFile.split('|')[i].split(',')[1],
                                        fileurl: baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadFile.split('|')[i].split(',')[0],
                                        uploadTime: res.data.uploadFile.split('|')[i].split(',')[3],
                                        userName: res.data.uploadFile.split('|')[i].split(',')[2],
                                    })
                                }
                            }
                            that.firstTabsName = 'x0'
                            that.firstTabsData = []
                            // mainList处理
                            for (var i = 0; i < res.data.mainList.length; i++) {
                                // 处理processList
                                for (var j = 0; j < res.data.mainList[i].processList.length; j++) {
                                    // 垫层和基础进行处理
                                    // 对 id === 1 进行处理
                                    // 将id ===1的这一项 直接赋值给firstObj
                                    if (res.data.mainList[i].processList[j].id == 1) {
                                        res.data.mainList[i].firstObj = JSON.parse(JSON.stringify(res.data.mainList[i].processList[j]))
                                    }
                                    // 对id === 2 进行处理
                                    if (res.data.mainList[i].processList[j].id == 2) {
                                        res.data.mainList[i].childObj = JSON.parse(JSON.stringify(res.data.mainList[i].processList[j]))
                                    }
                                }
                            }
                            for (var i = 0; i < res.data.mainList.length; i++) {
                                for (var j = 0; j < res.data.mainList[i].processList.length; j++) {
                                    // 将mainList中的每一项的processList内的数组中 id === 1 和 id === 2 删掉
                                    if (res.data.mainList[i].processList[j].id == 1) {
                                        res.data.mainList[i].processList.splice(j, 1)
                                    }
                                    if (res.data.mainList[i].processList[j].id == 2) {
                                        res.data.mainList[i].processList.splice(j, 1)
                                    }
                                }
                            }
                            for (var i = 0; i < res.data.mainList.length; i++) {
                                res.data.mainList[i].childTabsName = 'z0'
                                for (var j = 0; j < res.data.mainList[i].processList.length; j++) {
                                    // 对mainList内的每一项的processList内的每一个子项进行数据处理
                                    // first是垫层child是基础
                                    if (res.data.mainList[i].processList[j].weight === 1) {
                                        // 对processList内的子项的weight === 进行处理
                                        // 定义firstList 进行赋值 firstObj.downFloorList
                                        res.data.mainList[i].processList[j].firstList = res.data.mainList[i].firstObj.downFloorList
                                        res.data.mainList[i].processList[j].childList = res.data.mainList[i].childObj.downFloorList
                                    }
                                }
                            }
                            for (var i = 0; i < res.data.mainList.length; i++) {
                                res.data.mainList[i].types = 1
                                for (var j = 0; j < res.data.mainList[i].processList.length; j++) {
                                    // 定义processList内的每一项clList
                                    // 定义processList内的每一项djclList
                                    res.data.mainList[i].processList[j].clList = []
                                    res.data.mainList[i].processList[j].djclList = []
                                    if (res.data.mainList[i].processList[j].weight == 1) {
                                        // 对weight=== 1 赋值djAllList
                                        res.data.mainList[i].processList[j].djAllList = JSON.parse(JSON.stringify(res.data.mainList[i].processList[j].childList.concat(res.data.mainList[i].processList[j].firstList)))
                                    }
                                    res.data.mainList[i].processList[j].fgIndex = res.data.mainList[i].processList[j].topFloorList.length
                                    // 对请求回来的楼层数组进行reverse 顶楼到地下层排序
                                    res.data.mainList[i].processList[j].allList = JSON.parse(JSON.stringify(res.data.mainList[i].processList[j].topFloorList.reverse().concat(res.data.mainList[i].processList[j].downFloorList.reverse())))
                                }
                            }
                            // 数组处理完之后 mainList主体的每一项有childObj（基础层） firstObj(垫层) processList（去除垫层和基础） allList是

                            for (var i = 0; i < res.data.mainList.length; i++) {
                                for (var j = 0; j < res.data.mainList[i].processList.length; j++) {
                                    // res.data.mainList[i].processList[j].clList = []
                                    // res.data.mainList[i].processList[j].djclList = []
                                    for (var k = 0; k < res.data.mainList[i].processList[j].allList.length; k++) {
                                        // 实际使用的allList 对allList的每一项进行一些必要的处理
                                        for (var n = 0; n < res.data.mainList[i].processList[j].allList[k].matList.length; n++) {
                                            res.data.mainList[i].processList[j].allList[k].matList[n].ljdosage = 0
                                        }
                                    }
                                    for (var n = 0; n < res.data.mainList[i].processList[j].topFloorList[0].matList.length; n++) {
                                        res.data.mainList[i].processList[j].clList.push({
                                            mId: res.data.mainList[i].processList[j].topFloorList[0].matList[n].mId,
                                            sId: res.data.mainList[i].processList[j].topFloorList[0].matList[n].sId,
                                            mName: res.data.mainList[i].processList[j].topFloorList[0].matList[n].mName,
                                            sName: res.data.mainList[i].processList[j].topFloorList[0].matList[n].sName,
                                            unit: res.data.mainList[i].processList[j].topFloorList[0].matList[n].unit,
                                            dosage: 0
                                        })
                                    }
                                    if (res.data.mainList[i].processList[j].weight == 1) {
                                        for (var k = 0; k < res.data.mainList[i].processList[j].djAllList.length; k++) {
                                            for (var n = 0; n < res.data.mainList[i].processList[j].djAllList[k].matList.length; n++) {
                                                res.data.mainList[i].processList[j].djAllList[k].matList[n].ljdosage = 0
                                            }
                                        }
                                        for (var n = 0; n < res.data.mainList[i].processList[j].djAllList[0].matList.length; n++) {
                                            res.data.mainList[i].processList[j].djclList.push({
                                                mId: res.data.mainList[i].processList[j].djAllList[0].matList[n].mId,
                                                sId: res.data.mainList[i].processList[j].djAllList[0].matList[n].sId,
                                                mName: res.data.mainList[i].processList[j].djAllList[0].matList[n].mName,
                                                sName: res.data.mainList[i].processList[j].djAllList[0].matList[n].sName,
                                                unit: res.data.mainList[i].processList[j].djAllList[0].matList[n].unit,
                                                dosage: 0
                                            })
                                        }
                                    }

                                }
                            }

                            that.firstTabsData = res.data.mainList
                            that.fileList = []
                            if (res.data.uploadFile) {
                                for (var i = 0; i < res.data.uploadFile.split('|').length; i++) {
                                    that.fileList.push({
                                        fileid: res.data.uploadFile.split('|')[i].split(',')[0],
                                        filename: res.data.uploadFile.split('|')[i].split(',')[1],
                                        fileurl: baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadFile.split('|')[i].split(',')[0],
                                        uploadTime: res.data.uploadFile.split('|')[i].split(',')[3],
                                        userName: res.data.uploadFile.split('|')[i].split(',')[2]
                                    })
                                }
                            }
                            that.clmxList = res.data.planMatCountList
                            setTimeout(function () {
                                for (var j = 0; j < $('.material_num_itme1').length; j++) {
                                    $('.material_num_itme1').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                }
                                for (var j = 0; j < $('.material_num_itme3').length; j++) {
                                    $('.material_num_itme3').eq(j).css('width', $('.child_cnet_material1').eq(j % $('.child_cnet_material1').length).css('width'))
                                }
                                for (var j = 0; j < $('.material_num_itme2').length; j++) {
                                    $('.material_num_itme2').eq(j).css('width', $('.child_cnet_material2').eq(j % $('.child_cnet_material2').length).css('width'))
                                }
                            }, 100)
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                // getQuerys()
                this.getDetail()
            }
        });
    </script>
</body>
<style>
    .el-form-item {
        margin-bottom: 0;
    }

    .el-form-item__content {
        line-height: 32px;
    }

    .page-container {
        /* padding: 0 16px; */
        background: #fff;
        padding-bottom: 40px;
        height: 100%;
        position: relative;
    }

    .top_box {
        padding: 16px 16px 26px;
    }

    .title_box {
        display: flex;
        align-items: center;
    }

    .title_icon {
        width: 4px;
        height: 16px;
        background: #5574D7;
    }

    .title_txt {
        padding-left: 10px;
    }

    .cell_box {
        display: flex;
        align-items: center;
    }

    .public_input .el-date-editor {
        width: 100%;
    }

    .public_input .el-date-editor .el-range__icon {
        line-height: 24px;
    }

    .public_input .el-range-separator {
        width: auto;
        line-height: 24px;
    }

    .public_input .el-date-editor .el-range__close-icon {
        line-height: 24px;
    }

    .cell_cont {
        padding-left: 10px;
    }

    .top_cont {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .cell_box {
        margin-right: 20px;
    }

    .lang_sliver {
        width: 100%;
        height: 14px;
        background: #F0F6FA;
    }

    .content_box {
        padding: 0 16px;
    }

    .detail_box {
        border: 1px solid #EBEBEB;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .first_tabs {
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .first_tabs .el-tabs__item {
        padding: 0 10px !important;
        height: 32px;
        line-height: 32px;
        border: none;
        background: #E6EAF5;
        border-radius: 4px;
        margin-left: 20px;
    }

    .first_tabs .el-tabs__item:first-child {
        margin-left: 0;
    }

    .first_tabs .el-tabs--card>.el-tabs__header {
        border: none;
    }

    .first_tabs .el-tabs--card>.el-tabs__header .el-tabs__nav {
        border: none;
    }

    .first_tabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
        background: #5574D7;
        color: #FFFFFF;
        border-radius: 4px;
    }

    .el-tabs__header {
        margin: 0;
    }

    .first_tabs .el-tabs__nav-next,
    .first_tabs .el-tabs__nav-prev {
        line-height: 32px;
    }

    .first_tabs .el-tabs__nav-next i,
    .first_tabs .el-tabs__nav-prev i {
        color: #5574D7;
        font-weight: bold;
        font-size: 18px;
        line-height: 32px;
    }

    .first_cont {
        position: relative;
    }

    .child_tabs .el-tabs__item {
        height: 32px;
        position: relative;
        line-height: 32px;
    }

    .child_tabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-active::before {
        height: 2px;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        background: #5574D7;
    }

    .child_tabs {
        padding-right: 270px;
        /* padding: 0 20px; */
    }

    .child_tabs .el-tabs--card>.el-tabs__header .el-tabs__nav {
        border-bottom: none;
        border-left: none;
    }

    .child_tabs .el-tabs--card>.el-tabs__header {
        border-bottom: none;
    }

    .child_but {
        position: absolute;
        right: 20px;
        top: 0;
    }

    .child_but .el-button--primary {
        color: #fff;
        background-color: #FA7355;
        border-color: #FA7355;
        height: 32px;
        padding: 0;
    }

    .child_but .el-button--primary:hover,
    .child_but .el-button--primary:focus {
        background: #fb8f77;
        border-color: #fb8f77;
        color: #fff;
    }

    .child_but .el-button--primary:active {
        background: #e1684d;
        border-color: #e1684d;
        color: #fff;
        outline: none;
    }

    .child_cont {
        border-top: 1px solid #EBEBEB;
        padding: 30px;
        padding-bottom: 0;
    }

    .child_top {
        height: 156px;
        border-bottom: 14px solid #ABC4F0;
        padding-left: 212px;
        padding-top: 30px;
        overflow: hidden;
        position: relative;
    }

    .child_cnet {
        padding-left: 212px;
        position: relative;
        max-height: 810px;
    }

    .child_top_bg {
        width: 100%;
        height: 100%;
        background: #CAE1F3;
        border-left: 10px solid #ABC4F0;
        border-right: 10px solid #ABC4F0;
        position: relative;
    }

    .child_top_bg2 {
        width: 60%;
        height: 100%;
        background: #CAE1F3;
        position: relative;
        margin: 0 auto;
    }

    .child_top_bg2_top1 {
        position: absolute;
        top: -10px;
        height: 18px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        background: #ABC4F0;
    }

    .child_top_bg2_top2 {
        position: absolute;
        top: -28px;
        height: 18px;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        background: #98ACF7;
    }

    .child_cnet_box {
        height: 100%;
        border-left: 10px solid #ABC4F0;
        border-right: 10px solid #ABC4F0;
    }

    .child_bot {
        border-top: 14px solid #ABC4F0;
        border-bottom: 14px solid #ABC4F0;
        padding-left: 212px;
        position: relative;
    }

    .child_bot_box {
        height: 100%;
        border-left: 10px solid #ABC4F0;
        border-right: 10px solid #ABC4F0;
    }

    .child_footer {
        border-bottom: 14px solid #ABC4F0;
        padding-left: 212px;
        position: relative;
    }

    .child_footer_box {
        height: 100%;
        border-left: 10px solid #ABC4F0;
        border-right: 10px solid #ABC4F0;
    }

    .child_top_triangle {
        background: transparent;
        position: absolute;
        background: #fff;
        width: calc(50% + 16px);
        height: 100%;
        left: -8px;
        bottom: 28px;
        border-bottom: 14px solid #ABC4F0;
        transform: rotate(-6deg);
        transform-origin: left bottom;
        border-radius: 4px;
    }

    .child_top_triangle2 {
        background: transparent;
        position: absolute;
        background: #fff;
        width: calc(50% + 16px);
        height: 100%;
        right: -8px;
        bottom: 28px;
        border-bottom: 14px solid #ABC4F0;
        transform: rotate(6deg);
        transform-origin: right bottom;
        border-radius: 0 0 0 4px;
    }

    .child_top_column {
        width: 14px;
        height: 100%;
        border-left: 4px solid #98ACF7;
        background: #BED0FF;
        position: absolute;
        bottom: 0;
    }

    .child_top_title {
        position: absolute;
        left: 0;
        top: 20px;
    }

    .child_top_title_name {
        font-weight: bold;
        color: #333;
    }

    .child_top_title_desc {
        color: #666;
    }

    .child_cnet_tabs {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .child_cnet_tabs_box {
        padding: 30px;
        padding-top: 0;
        width: 100%;
        height: 100%;
    }

    .child_cnet_material {
        padding: 0 10px;
        display: inline-block;
    }

    .material_num_itme {
        padding: 0 10px;
        display: inline-block;
        text-align: center;
    }

    .material_num_itme .public_input {
        width: 84px !important;
        margin: 0 auto;
    }

    .material_title {
        position: relative;
        padding: 0 10px;
        height: 32px;
        border-radius: 5px;
        min-width: 84px;
        text-align: center;
        background: #E8E8E8;
        line-height: 32px;
    }

    .material_title_close {
        display: inline-block;
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        /* background-color: #5574D7; */
        font-size: 0;
    }

    .material_info {
        height: 90px;
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .chil_cnet_left {
        position: absolute;
        left: 0;
        width: 212px;
        top: 0;
        height: 100%;
        padding-bottom: 30px;
    }

    .chil_cnet_but {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .chil_cnet_left_title {
        height: 90px;
        display: flex;
        align-items: flex-end;
        position: relative;
    }

    .chil_cnet_left_date {
        display: flex;
        align-items: center;
        width: 166px;
        text-align: center;
    }

    .chil_cnet_left_floor {
        width: 46px;
        text-align: center;
    }

    .el-input--prefix .el-input__inner {
        padding-right: 24px;
    }

    .chil_cnet_left_cont {
        height: calc(100% - 90px);
        /* height: 100%; */
        overflow: hidden;
    }

    .all_work_box {
        display: flex;
        padding-top: 20px;
    }

    .cell_but .el-button {
        padding: 0 16px;
        height: 32px;
        background: transparent;
        border: 1px solid #5574d7;
        display: flex;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        color: #5574d7;
    }

    .cell_but .el-button:focus,
    .cell_but .el-button:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .cell_but .el-button:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .material_num_list {
        min-width: 100%;
    }

    .disabled_box {
        width: 84px;
        text-align: center;
        line-height: 32px;
        height: 32px;
        border: 1px solid #DCDFE6;
        background: #f5f7fa;
        border-radius: 4px;
    }

    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
    }

    .but_box .el-button {
        width: 120px;
        height: 32px;
        background: #5574d7;
        border-radius: 5px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .but_box .el-button--primary:focus,
    .but_box .el-button--primary:hover {
        background: rgba(85, 116, 215, 0.6);
        border-color: rgba(85, 116, 215, 0.6);
        color: #fff;
    }

    .but_box .el-button--primary.is-active,
    .but_box .el-button--primary:active {
        background: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        color: #fff;
    }

    .but_box .cancelClass {
        background: transparent;
        border: 1px solid #bbbbc5;
        color: #333333;
    }

    .but_box .cancelClass:focus,
    .but_box .cancelClass:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .but_box .cancelClass:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .public_popup_box {
        width: 100%;
        padding: 30px 40px;
        padding-bottom: 70px;
        position: relative;
    }

    .popup_content {
        padding-bottom: 20px;
        max-height: 400px;
        overflow: auto;
    }

    .sccl {
        color: red
    }
</style>

</html>